<template>
  <div class="profile-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>个人中心</span>
        </div>
      </template>
      
      <div class="profile-content">
        <div class="avatar-section">
          <el-avatar :size="120" :src="authStore.userInfo?.avatar">
            <el-icon :size="60"><User /></el-icon>
          </el-avatar>
          <h2>{{ authStore.userInfo?.nickname || authStore.userInfo?.username || '用户' }}</h2>
          <p>{{ authStore.userInfo?.username || '' }}</p>
        </div>
        
        <el-divider />
        
        <el-descriptions title="个人信息" :column="2" border>
          <el-descriptions-item label="用户ID">
            {{ authStore.userInfo?.id || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
            {{ authStore.userInfo?.username || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{ authStore.userInfo?.nickname || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            {{ authStore.userInfo?.email || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ authStore.userInfo?.phone || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="角色">
            {{ authStore.userInfo?.is_admin ? '管理员' : '普通用户' }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="authStore.userInfo?.status === 1 ? 'success' : 'danger'">
              {{ authStore.userInfo?.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        
        <el-divider />
        
        <div class="action-section">
          <el-button type="primary" :icon="Lock" @click="showChangePassword = true">
            修改密码
          </el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 修改密码对话框 -->
    <ChangePassword v-model="showChangePassword" @success="handlePasswordChanged" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { User, Lock } from '@element-plus/icons-vue'
import ChangePassword from '@/components/ChangePassword.vue'

const authStore = useAuthStore()
const showChangePassword = ref(false)

const handlePasswordChanged = (): void => {
  // 密码修改成功后的处理
  // 已经在 ChangePassword 组件中处理了登出和跳转
}
</script>

<style lang="scss" scoped>
.profile-container {
  .card-header {
    font-weight: 600;
    font-size: 16px;
  }
  
  .profile-content {
    .avatar-section {
      text-align: center;
      padding: 20px 0;
      
      h2 {
        margin: 16px 0 8px 0;
        color: #333;
      }
      
      p {
        color: #999;
        margin: 0;
      }
    }
    
    .action-section {
      text-align: center;
      padding: 20px 0;
    }
  }
}
</style>

